<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            font-size:1.2rem;
            font-weight: normal;
        }
        section{
            margin-top:5px;
            border:1px solid #ccc;
        }
        .btn_a{
            color:black;
            text-decoration: none;
            border:2px solid #ccc;
            padding:5px;
            margin:5px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <section class="section0">
        <h1>运用迭代给每个a标签添加事件监听器</h1>
        <a class="btn_a" href="../login.html">我是一个按钮1</a>
        <a class="btn_a" href="../login.html">我是一个按钮2</a>
    </section>
    <section class="section1">
        <h1>利用冒泡给父标签添加一个事件监听器，从而让所有的子标答，也可以使用</h1>
        <a class="btn_a" href="../login.html">我是一个按钮3</a>
        <a class="btn_a" href="../login.html">我是一个按钮4</a>
    </section>
</body>
</html>
<script>
    let arrays = document.querySelectorAll(".section0>.btn_a");
    arrays.forEach(item=>{
        item.addEventListener('click',event=>{
            alert(event.target.innerHTML);  //event.target指的是发生事件的元素
            event.preventDefault(); //终止默认动作
        },false);
    });
    let section1 = document.querySelector(".section1");
    section1.addEventListener('click',event=>{
        alert(event.target.innerHTML);
        event.preventDefault();
        event.stopPropagation();    //终止冒泡，其父节点中还有相同的事件，也不再被激活了。
    },false);
    let body = document.getElementsByTagName("body")[0];
    body.addEventListener('click',()=>{
        alert("我是一个body");
    },false);
</script>